<template>
	<view class="container f36">
		<view class="top-fixed">
			<view class="p30 pb10">
				<uni-segmented-control
					:current="currentDay"
					:values="items"
					@clickItem="onClickItem"
					styleType="button"
					activeColor="#3A9BFF "
				></uni-segmented-control>
				<view class="p30 box-day pct100 input-radius mt30 pb10">
					<view class="flex-between">
						<view class="f30 b"
							>{{
								currentDay === 0
									? '今日'
									: currentDay === 1
									? '本周'
									: '本月'
							}}小结</view
						>
						<view class="f28 primary-color df" @tap="goNewDaily">
							<view>查看详情</view>
							<uni-icons
								type="forward"
								size="20"
								color="#3A74FC "
							></uni-icons>
						</view>
					</view>
					<view class="g6b f28">
						共计收到{{
							currentDay === 0
								? '日'
								: currentDay === 1
								? '周'
								: '月'
						}}报
						<text class="primary-color f28">{{
							currentData.committedCount
						}}</text>
						份，
						<text class="primary-color f28">{{
							currentData.committedCount
						}}</text>
						人已提交，
						<text class="primary-color f28">{{
							currentData.uncommittedCount
						}}</text>
						人未提交
						<view
							class="f24"
							v-if="
								currentData &&
								currentData.workJournalCountQuestionVOList &&
								currentData.workJournalCountQuestionVOList
									.length > 0
							"
						>
							其中收到
							<text
								v-for="(
									item, index
								) in currentData.workJournalCountQuestionVOList"
								:key="index"
							>
								{{ item.title }}
								<text class="num-color">{{
									item.questionCount
								}}</text>
								条{{
									index !=
									currentData.workJournalCountQuestionVOList
										.length -
										1
										? '、'
										: ''
								}}
							</text>
						</view>
					</view>
					<view
						class="f20 mt10 g6b flex-between flex-wrap"
						:class="downSHow ? 'h-64' : ''"
					>
						<view
							class="backf input-radius box-label"
							v-for="(
								item, index
							) in currentData.workJournalCountLabelVOList"
							:key="index"
						>
							{{ item.labelName }}
							<text class="primary-color pl10">{{
								item.labelCount
							}}</text>
						</view>
						<view
							class="symbol"
							v-for="index of justNum"
							:key="index"
						></view>
					</view>
					<view
						v-if="
							currentData &&
							currentData.workJournalCountLabelVOList &&
							currentData.workJournalCountLabelVOList.length > 4
						"
					>
						<view
							class="triangle-down tc"
							@tap="showClick(false)"
							v-if="downSHow"
						></view>
						<view
							class="triangle-up tc"
							@tap="showClick(true)"
							v-else
						></view>
					</view>
				</view>
			</view>
			<!--筛选-->
			<view class="tab-box">
				<view
					class="tab-item"
					v-for="(item, index) in searchTabList"
					:key="item.value"
					@tap="clickSearch(item, index)"
				>
					<view>{{ item.name }}</view>
					<uni-icons
						:type="item.icon"
						size="36rpx"
						color="#666666"
					></uni-icons>
				</view>
			</view>
			<view v-if="showSearchBar"
				><uni-search-bar
					v-model="searchVal"
					placeholder="搜索"
					@confirm="submitSearch"
					@cancel="clearSearch"
					@clear="clearSearch"
				></uni-search-bar
			></view>
			<view class="pd20" v-if="showDateRange"
				><uni-datetime-picker
					v-model="dateRange"
					type="daterange"
					@change="chooseDateRange"
					rangeSeparator="至"
			/></view>
			<view class="mb10"
				><diy-segmented
					:current="currentTab"
					:values="tabList"
					:active-color="activeColor"
					style-type="text"
					@clickItem="changeType"
				></diy-segmented
			></view>
		</view>
		<view class="list-body f36" :style="'margin-top:' + topHeight + 'rpx'">
			<block v-if="dataList && dataList.length">
				<view
					class="card-box"
					v-for="item in dataList"
					:key="item.id"
					@tap="goReportDetail(item)"
				>
					<view class="df lh80">
						<view class="w60 text-over">{{
							item.title || ''
						}}</view>
						<view
							class="w40 tr"
							:class="{
								'primary-color': !item.readStatus,
								g9: item.readStatus && item.readStatus !== 3,
								'danger-color': item.readStatus === 3,
							}"
						>
							{{ item.readStatusName || '未读' }}
						</view>
					</view>
					<view class="lh80">填报周期：{{ showDate(item) }}</view>
					<view class="lh60 g9 f32"
						>提交时间：{{ item.commitTime || '-' }}</view
					>
				</view>
			</block>
			<diy-empty v-else></diy-empty>
		</view>
	</view>
</template>

<script>
import diySegmented from '@/subPackagesLog/components/diy-segmented/diy-segmented.vue'
import rixiaojieIcon from './icon/rixiaojie-icon.png'
import zhouxiaojieIcon from './icon/zhouxiaojie-icon.png'
import xiaojieIcon from './icon/xiaojie-icon.png'
export default {
	components: {
		diySegmented,
	},
	data() {
		return {
			rixiaojieIcon,
			zhouxiaojieIcon,
			xiaojieIcon,
			currentTab: 0,
			tabList: [
				{
					name: '日报',
					num: 0,
				},
				{
					name: '周报',
					num: 0,
				},
				{
					name: '月报',
					num: 0,
				},
			],
			activeColor: '#2b58de',
			searchTabList: [
				{
					name: '提交人',
					value: 1,
					icon: 'bottom',
				},
				{
					name: '填报周期',
					value: 2,
					icon: 'bottom',
				},
				{
					name: '提交时间',
					value: 3,
					icon: 'bottom',
				},
			],
			showSearchBar: false,
			showDateRange: false,
			summaryList: [
				{
					type: 0,
					committedCount: 0,
					uncommittedCount: 0,
					lateCount: 0,
				},
				{
					type: 1,
					committedCount: 0,
					uncommittedCount: 0,
					lateCount: 0,
				},
				{
					type: 2,
					committedCount: 0,
					uncommittedCount: 0,
					lateCount: 0,
				},
			],
			orgId: uni.getStorageSync('orgId'),
			hasMore: false,
			dataList: [],
			paramData: {
				pageIndex: 1,
				pageSize: 10,
				userName: '',
				type: 0,
				commitTimeBegin: '',
				commitTimeEnd: '',
				userType: 1,
				orgId: '',
				beginTime: '',
				endTime: '',
			},
			dateRange: [],
			searchType: 0,
			searchVal: '',
			backId: '',
			items: ['今日', '本周', '本月'],
			currentDay: 0,
			downSHow: true,
			currentData: '',
			justNum: 0,
			topHeight: 0,
		}
	},
	created() {
		// this.getHeight()
	},
	mounted() {
		this.getHeight()
	},
	onLoad(options) {
		this.orgId = uni.getStorageSync('orgId') || ''
		this.paramData.orgId = this.orgId
		this.getSummaryData()
		this.getPageList()
	},
	onShow() {
		if (this.backId) {
			this.getReportDetail()
		}
		this.getUnReadCount()
		this.getWorkJournalSummaryByType()
	},
	methods: {
		showClick(val) {
			this.downSHow = val
			this.getHeight(1, val)
		},
		getHeight(type, val) {
			let that = this
			setTimeout(() => {
				uni.createSelectorQuery()
					.in(this)
					.select('.top-fixed')
					.boundingClientRect((rect) => {
						// if (type) {
						// 	if (!val) {
						// 		that.topHeight = rect.height * 2 + 20
						// 	} else {
						// 		that.topHeight = rect.height * 2 + 20
						// 	}
						// } else {

						// }
						that.topHeight = rect.height * 2 + 10
						console.log(rect.height)
					})
					.exec()
			}, 200)
		},
		onClickItem(e) {
			this.currentDay = e.currentIndex
			this.getWorkJournalSummaryByType()
			this.currentTab = e.currentIndex
			this.paramData.type = e.currentIndex
			this.getSearchPage()
			this.getHeight()
		},
		//查询今日、本周、本月小结
		getWorkJournalSummaryByType() {
			let _that = this
			this.$request
				.request(
					'carer-platform/journal/workJournal/getWorkJournalSummaryByType',
					{
						method: 'post',
						data: {
							type: this.currentDay,
							orgId: uni.getStorageSync('orgId'),
						},
					}
				)
				.then((res) => {
					if (res.success) {
						this.currentData = res.data
						this.justNum =
							4 -
							(res.data.workJournalCountLabelVOList.length % 4)
					}
				})
		},
		goNewDaily() {
			uni.navigateTo({
				url: `/subPackagesLog/pages/workLog/newDaily?type=${this.currentDay}`,
			})
		},
		//查询小结
		getSummaryData() {
			let _that = this
			this.$request
				.request('carer-platform/journal/workJournal/summary', {
					data: {
						orgId: this.orgId,
					},
				})
				.then((res) => {
					if (res.success) {
						if (res.data && res.data.length) {
							_that.summaryList = res.data
						}
					}
				})
		},
		//查询分页列表
		getPageList() {
			let _that = this
			this.$request
				.request('carer-platform/journal/workJournal/page', {
					method: 'post',
					data: this.paramData,
				})
				.then((res) => {
					if (res.success) {
						if (res.data.data && res.data.data.length) {
							_that.dataList = _that.dataList.concat(
								res.data.data
							)
							_that.hasMore = true
						} else {
							_that.hasMore = false
						}
					}
				})
		},
		//填报周期显示
		showDate(item) {
			if (item.type === 0) {
				return (
					(item.beginTime && item.beginTime.replace(/-/g, '/')) || '-'
				)
			}
			if (item.type === 1) {
				return (
					(item.beginTime && item.beginTime.replace(/-/g, '/')) +
						'~' +
						(item.endTime && item.endTime.replace(/-/g, '/')) || '-'
				)
			}
			if (item.type === 2) {
				return (
					(item.beginTime &&
						item.beginTime.slice(0, 7).replace('-', '/') + '月') ||
					'-'
				)
			}
		},
		//查询未读数量
		getUnReadCount() {
			let _that = this
			this.$request
				.request('carer-platform/journal/workJournal/unreadCount', {
					data: {
						orgId: this.orgId,
					},
				})
				.then((res) => {
					if (res.success) {
						let data = res.data || {}
						_that.tabList.forEach((item, index) => {
							if (index === 0) {
								item.num = data.dailyCount || 0
							}
							if (index === 1) {
								item.num = data.weeklyCount || 0
							}
							if (index === 2) {
								item.num = data.monthlyCount || 0
							}
						})
					}
				})
		},
		//汇报类型
		changeType(event) {
			this.paramData.type = event.currentIndex
			this.getSearchPage()
			this.currentDay = event.currentIndex
			this.getWorkJournalSummaryByType()
			this.getHeight()
		},
		//点击筛选项
		clickSearch(item, index) {
			if (this.searchType !== item.value) {
				this.showDateRange = false
				this.showSearchBar = false
				this.searchTabList.forEach((item) => {
					item.icon = 'bottom'
				})
			}
			this.searchType = item.value
			this.dateRange = []
			if (item.value === 1) {
				this.showDateRange = false
				this.showSearchBar = !this.showSearchBar
				this.searchTabList[index].icon = this.showSearchBar
					? 'top'
					: 'bottom'
			} else {
				this.showSearchBar = false
				this.showDateRange = !this.showDateRange
				this.searchTabList[index].icon = this.showDateRange
					? 'top'
					: 'bottom'
				setTimeout(() => {
					if (item.value === 2) {
						this.dateRange = [
							this.paramData.beginTime,
							this.paramData.endTime,
						]
					}
					if (item.value === 3) {
						this.dateRange = [
							this.paramData.commitTimeBegin,
							this.paramData.commitTimeEnd,
						]
					}
				}, 300)
			}
			this.getHeight()
		},
		//确认搜索
		submitSearch() {
			this.paramData.userName = this.searchVal
			this.getSearchPage()
		},
		//清空搜索
		clearSearch() {
			this.paramData.userName = this.searchVal = ''
			this.getSearchPage()
		},
		//时间查询
		chooseDateRange(event) {
			this.dateRange = event
			if (event && event.length) {
				if (this.searchType === 2) {
					this.paramData.beginTime = event[0]
					this.paramData.endTime = event[1]
				}
				if (this.searchType === 3) {
					this.paramData.commitTimeBegin = event[0]
					this.paramData.commitTimeEnd = event[1]
				}
			} else {
				if (this.searchType === 2) {
					this.paramData.beginTime = ''
					this.paramData.endTime = ''
				}
				if (this.searchType === 3) {
					this.paramData.commitTimeBegin = ''
					this.paramData.commitTimeEnd = ''
				}
			}
			this.getSearchPage()
		},
		//初始查询
		getSearchPage() {
			this.paramData.pageIndex = 1
			this.dataList = []
			this.hasMore = false
			this.getPageList()
		},
		//点击去查看详情
		goReportDetail(item) {
			this.backId = item.id
			uni.navigateTo({
				url:
					'/subPackagesLog/pages/workLog/reportDetail?type=approval&id=' +
					item.id +
					'&userName=' +
					item.userName +
					'&typeName=' +
					item.typeName,
			})
		},
		//返回时查询被操作内容明细
		getReportDetail() {
			let _that = this
			this.$request
				.request('carer-platform/journal/workJournal/detail', {
					data: {
						id: this.backId,
					},
				})
				.then((res) => {
					if (res.success) {
						let data = res.data
						if (_that.dataList && _that.dataList.length) {
							_that.dataList.forEach((item) => {
								if (item.id === data.id) {
									item.readStatus = data.readStatus
									item.readStatusName = data.readStatusName
								}
							})
						}
					}
				})
		},
	},
	onReachBottom() {
		if (this.hasMore) {
			this.paramData.pageIndex = this.paramData.pageIndex + 1
			this.getPageList()
		}
	},
}
</script>

<style scoped lang="scss">
.container {
	background-color: #fff;
	min-height: 100vh;
	.top-fixed {
		position: fixed;
		left: 0;
		top: 0;
		box-shadow: 0px -2px 16px 0px rgba(0, 0, 0, 0.08);
		z-index: 6;
		background-color: #fff;
		box-sizing: border-box;
		.top-box {
			flex: 1;
			margin-left: auto;
			margin-right: auto;
			box-sizing: border-box;
			margin-left: 30rpx;
			margin-top: 30rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			position: relative;
			background: linear-gradient(90deg, #eaf5ff 0%, #edf6ff 100%);
			&:last-child {
				margin-right: 30rpx;
			}
			.image-icon {
				position: absolute;
				right: 0;
				top: 0;
			}
			.icon-box {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: $primary-color;
				border-radius: 50rpx;
			}
		}
		.tab-box {
			display: flex;
			box-sizing: content-box;
			overflow-x: auto;
			overflow-y: hidden;
			height: 100rpx;
			.tab-item {
				flex: 1 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.list-body {
		// margin-top: 670rpx;
		.card-box {
			border: 2rpx #eeeeee solid;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.body-mt {
		margin-top: 510rpx;
	}
}
/deep/ .segmented-control__item--button--first {
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
}
/deep/ .segmented-control__item--button--last {
	background: #eaf5ff;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
}
/deep/ .segmented-control__item--button {
	background: #eaf5ff;
}
/deep/ .segmented-control {
	border-color: #eaf5ff !important;
}
.box-day {
	background: linear-gradient(90deg, #eaf5ff 0%, #edf6ff 100%);
	box-sizing: border-box;
}
.num-color {
	color: #ef7373;
}
.box-label {
	height: 56rpx;
	line-height: 56rpx;
	width: 140rpx;
	margin-bottom: 15rpx;
	text-align: center;
}
.symbol {
	width: 140rpx;
}
.triangle-down::after {
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid $active-color; //白色
	border-top-color: $active-color;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}
.triangle-up::after {
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid $active-color; //白色
	border-top-color: transparent;
	border-bottom-color: $active-color;
	border-left-color: transparent;
	border-right-color: transparent;
}
.h-64 {
	height: 64rpx;
	overflow: hidden;
}
</style>
